﻿﻿<!DOCTYPE html>  
<html>  
    <head>  
    <meta charset="UTF-8">  
    <title>单选复选框应用</title>  
    <script src="http://hsjdtech.com/inter/scripts/jquery-1.11.1.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
        .params{height: 18px;line-height: 18px;text-align: center;cursor: pointer;float: left;margin:4px 0 0 10px; color: #005aa0;border: 2px solid White; padding:0 5px;}
        .paramsname{height: 18px;line-height: 18px; float: left;}

        .paramsR{height: 18px;line-height: 18px;text-align: center;cursor: pointer;float: left;
                 margin:4px 0 0 10px; padding:3px 10px;border-radius:14px;background:#dbd5d5;}
        .paramsROn {border: 1px solid #64c3a4;background:#d2f1e7;color: #64c3a4;}
    </style>  
    <script type="text/ecmascript">
        $(document).ready(function () {
            $(".checkBtn").append(showBtn('查询', '70px', '22px', '#2D90CB', '#2380C3', '#fff', '#fff', 'query()'));

            //参数
            $(".params").mousemove(function () { $(this).css("color", "#E4393C"); });
            $(".params").mouseout(function () { if ($(this).attr("name") != "select") { $(this).css("color", "#005aa0"); } });
            $(".paramsname").click(function () {
                if ($(this).attr("name") != "select") {
                    var pname = "", ptype = "";
                    pname = $(this).html().replace(/[ ]/g, "");
                    ptype = $(this).parent("div").children("select", "class='paramstype'").val();

                    $(this).attr("name", "select");
                    $(this).parent("div").css("border-color", "#E4393C");

                }
                else {
                    $(this).attr("name", "");
                    $(this).css("color", "#005aa0");
                    $(this).parent("div").css("border-color", "White");
                    $(this).parent("div").children("select", "class='paramstype'").css("visibility", "collapse");
                }
            });

            $(".paramsR").click(function () {
                 $(this).addClass("paramsROn").siblings().removeClass("paramsROn");
            });
        });
        function query() {
            var sparamids = [], sparamnames = [];
            $("#dayParamsDiv .paramsname").each(function () {
                if ($(this).attr("name") == "select") {
                    sparamnames.push($(this).html().replace(/[ ]/g, ""));
                    sparamids.push($(this).attr("id"));
                }
            });
            alert(sparamids.toString());
            alert(sparamnames.toString());

            var selectTitle = '';
            $("#radioDiv .paramsR").each(function () {
                if ($(this).hasClass("paramsROn")) {
                    selectTitle=$(this).attr('title');
                }
            });
            alert(selectTitle);
        }
       
        function showBtn(text, width, height, backgroud, borderColor, color, oncolor, myFunction) {
            return "<input type=\"button\" value=\"" + text + "\" onclick=\"" + myFunction + "\" style=\"float: left; height: " + height + ";\
    padding: 0px; line-height: " + height + "; width: " + width + "; margin-left: 20px; cursor: pointer;\
    text-align: center; color: "+ color + "; background-color: " + backgroud + ";\
    border: 1px solid " + borderColor + ";\" onmousemove=\"this.style.color='" + oncolor + "'\" onmouseout=\"this.style.color='" + color + "'\"/>";
        }
    </script>  
    </head>  
    <body>  
       <div id="dayParamsDiv">
        <div class="params" >
            <div id="Yl" class="paramsname">降水量</div>
        </div>
        <div class="params" >
            <div id="Wd" class="paramsname">平均气温</div>
        </div>
        <div class="params" >
            <div id="WdTop" class="paramsname">最高气温</div>
        </div>
        <div class="params" >
            <div id="WdLow" class="paramsname">最低气温</div>
        </div>
        <div class="params" >
            <div id="Dw0cm" class="paramsname">平均地表温度</div>
        </div> 
        <div class="params" >
            <div id="Sd" class="paramsname">平均相对湿度</div>
        </div> 
        <div class="checkBtn"></div>
           </div>

        <div id="radioDiv" style="width:100%;float:left;">
            <div class="paramsR paramsROn" title="1">单选1</div>
            <div class="paramsR" title="2">单选2</div>
            <div class="paramsR" title="3">单选3</div>
        </div>
    </body>  
</html>  